import React from 'react';
import { View } from 'react-native';
import { Lt, Color, NavTheme as Nav, Label, Jpp, Jx, Fimage, Rlist, Dialog } from "../_utils";
import { Net, NET_RI } from "../_net"
import { eRole, LabelHead, ViewReport, cMe } from './_me';

class ViewDetail extends React.PureComponent{
    render(){
        const { data } = this.props;
        return <View style = {{paddingVertical:20, backgroundColor:"rgba(255,255,255,0.1)",flexDirection:"row", justifyContent:"space-around", alignItems:"center"}}>
        <LabelHead title={"佣金比例"}>{data.empMoney}</LabelHead>
        <View style={{width:1, height:30, backgroundColor:Color.whiteOpacity}}/>
        <LabelHead title={"团队人数"}>{data.agentSum}</LabelHead>
        <View style={{width:1, height:30, backgroundColor:Color.whiteOpacity}}/>
        <LabelHead title={"代理日期"}>{data.agentDate ? Jx.toDate(data.agentDate, "", false) : "未代理"}</LabelHead>
    </View>
    }
}

const c_fields = ["贡献佣金","订单数量","开单人数"]
const c_field2 = ["贡献佣金","订单数量",]
// 我的队员  详情页
export class TeamDetail extends React.PureComponent{
    constructor(props){
        super(props);
        
        const {data} = this.props.navigation.state.params;
        this.state = {
            preData : data,
            data : {
                todayOpen : Jpp.questionMark,//今日开单
                yesMondayOpen:Jpp.questionMark,// 本月开单
                lastMondayOpen:Jpp.questionMark, //上月开单
                yesdayOpen:Jpp.questionMark, //昨日开单

                lastMondayOder : Jpp.questionMark, // 上月订单
                todayOder:Jpp.questionMark, // 今日订单
                yesMondayOder:Jpp.questionMark, //本月订单
                yesdayOder:Jpp.questionMark, // 昨日订单
                
                yesMonday : Jpp.questionMark, //本月贡献佣金
                yesday:Jpp.questionMark, // 昨日贡献佣金
                today:Jpp.questionMark, //今日贡献佣金
                lastMonday:Jpp.questionMark, //昨月贡献佣金

                agentDate : Jpp.dateTemp,
                empMoney:Jpp.questionMark, //佣金比例
                agentSum:Jpp.questionMark, //团队人数
            },
        }
    }
    static navigationOptions = ({navigation, screenProps})=>({
        ...Nav.options,
        headerTitle: 
            (navigation.state.params.data.roleId === eRole.AGENT) ? 
            (eRole.names[eRole.AGENT] + "详情") : "会员详情",
        
    })
    componentWillMount(){
        const {data} = this.props.navigation.state.params;
        Net.request("member/child", {id : data.id}, {NET_RI}).then(r=>{
            if(r.data){
                this.setState({data:cMe.toChild(r.data)})
            }
        });
    }
    render(){
        const preData = this.state.preData;
        const isAgent = (preData.roleId === eRole.AGENT);
        const fields = isAgent ? c_fields : c_field2;
        const {data} = this.state;
        return <View style = {{flex:1, backgroundColor:Color.back}}>
            <Nav.StatusBar/>
            <View style={{backgroundColor:Color.theme, alignItems:"center"}}>
                <Fimage uri={preData.image} style={{width:80, height:80, borderRadius:40}}/>
                <Label style={{marginVertical:Lt.margin, fontSize:Lt.c16, color:"white"}}>{preData.username}</Label>
                {
                    isAgent ? <ViewDetail data={data}/> : null
                }
            </View>
            {/* const c_fields = ["贡献佣金","订单数量","开单人数"] */}
            <Rlist style={{paddingVertical:20}}>
                <ViewReport date={"今日"} fields={fields} values={[data.today,data.todayOder,data.todayOpen]}/>
                <ViewReport date={"昨日"} fields={fields} values={[data.yesday,data.yesdayOder,data.yesdayOpen]}/>
                <ViewReport date={"当月"} fields={fields} values={[data.yesMonday,data.yesMondayOder,data.yesMondayOpen]}/>
                <ViewReport date={"上月"} fields={fields} values={[data.lastMonday,data.lastMondayOder,data.lastMondayOpen]}/>
            </Rlist>
            {/* todayOpen : Jpp.questionMark,//今日开单
            yesMondayOpen:Jpp.questionMark,// 本月开单
            lastMondayOpen:Jpp.questionMark, //上月开单
            yesdayOpen:Jpp.questionMark, //昨日开单

            lastMondayOder : Jpp.questionMark, // 上月订单
            todayOder:Jpp.questionMark, // 今日订单
            yesMondayOder:Jpp.questionMark, //本月订单
            yesdayOder:Jpp.questionMark, // 昨日订单

            yesMonday : Jpp.questionMark, //本月贡献佣金
            yesday:Jpp.questionMark, // 昨日贡献佣金
            today:Jpp.questionMark, //今日贡献佣金
            lastMonday:Jpp.questionMark, //昨月贡献佣金 */}
        </View>;
    }
}